<template>
  <el-dialog
    @close="close"
    title="添加&修改广告位信息"
    :visible.sync="dialog"
    width="30%"
  >
    <el-form size="mini" :model="formInline" :rules="rules" ref="formInline" label-width="100px">
      <el-form-item label="广告名称：" prop="advertisename" >
        <el-input v-model="formInline.advertisename"></el-input>
      </el-form-item>
      <el-form-item prop="photourl" label="上传广告图：">
        <input accept="image/gif, image/jpeg, image/png" class="upload-file_ipt" @change="tirggerFile($event)" type="file" >
        <br>
        <img  width="68" height="68" :src="showImg" alt="">
      </el-form-item>
      <el-form-item label="链接：" prop="title" >
        <el-input v-model="formInline.link"></el-input>
      </el-form-item>
      <el-form-item label="位置：">
        <el-radio-group v-model="formInline.position">
          <el-radio  :label="1">登录</el-radio>
          <el-radio :label="2">注册</el-radio>
          <el-radio :label="3">忘记密码</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="show_name" label="展示时间">
        <el-radio-group v-model="radio" @change="radioChange">
          <el-radio value="期限展示" :label="1">期限展示</el-radio>
          <el-radio value="不期限展示" :label="2">不期限展示</el-radio>
        </el-radio-group>
        <div v-show="radio === 1">
          <el-date-picker
            v-model="formInline.begintime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker> -
          <el-date-picker
            v-model="formInline.endtime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>

      </el-form-item>
      <el-form-item prop="show_name" label="是否展示">
        <!--<el-input placeholder="是否展示" v-model="formInline.show_name"></el-input>-->
        <el-radio v-model="formInline.onshow" :label="0">展示</el-radio>
        <el-radio v-model="formInline.onshow" :label="2">未展示</el-radio>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :disabled="btnLoading" @click="dialog = false">取 消</el-button>
      <el-button type="primary" :loading="btnLoading" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>

</template>
<script>
import { addAdListAPI , getAdDetailAPI, updatePosterAPI} from '@/api/operation'
// import { getRouterTreeAPI } from '@/api/system/menu'
import { upload } from '@/utils/other-request'
import { mapGetters } from 'vuex'

export default {
  name: 'AdvertisingSpaceEdit',
  props: {
    dialog_: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: null
    }
  },
  data() {
    var validateSort = (rule, value, callback) => {``
      var reg = /^[0-9]\d*$/
      if (value === null || value === '' | value === undefined) {
        callback()
      } else if (!reg.test(value)) {
        return callback(new Error('请输入正确的数字'))
      } else {
        callback()
      }
    }
    return {
      props: {
        label: 'title',
        children: 'children'
      },
      radio: 2,
      options: [{
        value: 'PC客户端',
        label: 'PC客户端'
      }, {
        value: 'PCweb客户端',
        label: 'PCweb客户端'
      }],
      showImg: null,
      value: '',
      dialog: false,
      formInline: {
        begintime: null,
        endtime: '',
        photourl: '',
        link: '',
        position: 1,  // 1登录 2.注册 0 不限
      },
      btnLoading: false,
      showTime:false,
      treeData: [],
      rules: {
      }
    }
  },
  computed: {
    ...mapGetters([
      'img_base_url',
    ])
  },
  methods: {

    // 选择头像回调
    tirggerFile(event) {
      var e = event || window.event;
      this.formInline.photourl = e.target.files[0]
      this.showImg = URL.createObjectURL(this.formInline.photourl)
    },
    // 根据角色ID查询角色详情
    getDetails() {
      getAdDetailAPI({ id: this.id }).then(res => {
          if (res.code === 0) {
            this.formInline = res.data
            this.formInline = {
              id: this.formInline.id,
              advertisename: this.formInline.advertisename,
              photourl: this.formInline.photourl,
              link: this.formInline.link,
              begintime: this.formInline.starttime,
              endtime: this.formInline.endtime,
              position: this.formInline.positiontype,
              onshow: this.formInline.onshow
            }
            if (this.formInline.begintime || this.formInline.endtime) {
              this.radio = 1
            }
            this.showImg = this.img_base_url + this.formInline.photourl
          } else {
            this.$message.error(res.message)
          }
        })
    },
    // radio 的change事件
    radioChange() {
      this.formInline.begintime = null
      this.formInline.endtime = null
    },
    close() {
      this.$emit('close')
    },
    addSubmit() {
      addAdListAPI(this.formInline).then(res => {
        this.btnLoading = false
        if (res.code === 0) {
          this.$message.success('操作成功')
          this.$emit('success')
          this.dialog = false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    updateSubmit() {
      updatePosterAPI(this.formInline).then(res => {
        this.btnLoading = false
        if (res.code === 0) {
          this.$message.success(res.msg)
          this.$emit('success')
          this.dialog = false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 提交
    onSubmit() {
      this.$refs.formInline.validate((valid) => {
        if (valid) {
          if(this.id){
            this.btnLoading = true
            if (typeof this.formInline.photourl === 'string') {
              this.updateSubmit()
            } else {
              let formData = new FormData()
              formData.append("filename", this.formInline.photourl)
              upload(formData).then(res => {
                this.formInline.photourl = res.data.path
                this.updateSubmit()
              })
            }
          }else{
            this.btnLoading = true
            let formData = new FormData()
            formData.append("filename", this.formInline.photourl)
            upload(formData).then(res => {
              this.formInline.photourl = res.data.path
              this.addSubmit()
            })
          }
        } else {
          this.$message.warning("请填写完整的信息")
          return false;
        }
      });

    },
  },
  mounted() {
    this.dialog = this.dialog_
    if (this.id) {
      this.getDetails() // 编辑查询详情
    } else {
      //this.getRouterAll() //新增查询菜单树信息
    }
  }
}
</script>
